import { Component, OnInit } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
import moment from 'moment/src/moment.js';
import 'moment/src/locale/zh-cn.js'; // 时间中文显示
import { HttpService } from '../../../services/http.service';
import { ActivatedRoute } from '@angular/router';
import { Observable, fromEvent } from 'rxjs';
import { opusIdUrl, comment, opuscomment } from '../../../urlConfig';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'app-opus-details',
  templateUrl: './opus-details.component.html',
  styleUrls: ['./opus-details.component.styl']
})
export class OpusDetailsComponent implements OnInit {
  constructor(
    private notification: NzNotificationService,
    private message: NzMessageService,
    private http: HttpService,
    private route: ActivatedRoute
  ) {}
  id: ''; // 作品id
  commentDate = {
    content: '', // 评论内容
    date: '', // 时间
    opusId: '' // 案例序号
  };
  commit: any[] = []; // 存放全部评论
  partCommit: any[] = []; // 要渲染的部分评论
  // isSpinning = true; // 加载动画控制
  content: string = ''; // 作品内容
  partakeAdd: any[] = []; // 参与人员
  code: string = ''; // 仓库地址
  date: string = ''; // 发布时间
  title: string = ''; // 标题
  browse: number = 0; // 浏览量
  commentVolume: number = 0; // 评论数量

  ngOnInit() {
    // 获取该作品id
    this.route.params.subscribe((date: any) => {
      this.commentDate.opusId = date.id;
      this.id = date.id;
    });

    // 获取该id的数据
    this.http.getData(opusIdUrl + this.id).subscribe((event: any) => {
      if (event.code === 200) {
        this.content = event.data.content;
        this.partakeAdd = event.data.partakeAdd;
        this.code = event.data.code;
        this.date = event.data.date;
        this.title = event.data.title;
        this.browse = event.data.browse;
        this.commentVolume = event.data.commentVolume;
        const element: any = document.getElementById('content');
        element.innerHTML = this.content;
      }
    });

    this.getcommit();
  }

  // 生命周期函数
  ngAfterContentChecked(): void {
    const element = document
      .getElementById('content')
      .getElementsByTagName('img');
    for (var index = 0; index < element.length; index++) {
      const windowWidthSize: number = document.documentElement.clientWidth;
      if (windowWidthSize < 1200) {
        element[index].style.width = '100%';
        element[index].style.height = 'auto';
      } else {
        element[index].style.width = '';
        element[index].style.height = '';
      }
    }
  }

  // 发送评论
  sendDiscuss(error) {
    if (this.commentDate.content === '') {
      this.createNotification(error);
    } else {
      this.commentDate.date = moment().format('YYYY-MM-DD HH:mm:ss');

      this.http
        .postData(comment, this.commentDate)
        .subscribe((response: any) => {
          if (response.code === 200) {
            this.commentDate.content = '';
            this.getcommit();
            this.createMessage('success');
          }
        });
    }
  }

  // 获取所有评论内容
  getcommit() {
    this.http.getData(opuscomment + this.id).subscribe((event: any) => {
      if (event.code === 200) {
        this.commit = event.data;

        // 刚一进入页面时显示第一页的内容
        this.partCommit = [];
        this.commit.forEach((currentValue: any, index: number) => {
          if (index < 10) {
            this.partCommit.push(currentValue);
          }
        });
      }
    });
  }

  // 根据页数渲染评论北容
  PageIndexChange(event) {
    this.partCommit = [];
    this.commit.forEach((currentValue: any, index: number) => {
      if (event * 10 - 10 <= index && event * 10 > index) {
        this.partCommit.push(currentValue);
      }
    });
  }

  createNotification(type: string): void {
    this.notification.create(type, '发送评论失败', '请输入评论内容');
  }

  createMessage(type: string): void {
    this.message.create(type, `评论成功！`);
  }
}
